<template>
  <div class="app-container">

    <u-page title="收费标准设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="80px">
        <el-tabs v-model="active">
          <el-tab-pane label="手机短信" name="first">
            <el-card shadow="never" class="panel">
              <div style="margin-bottom: 20px">
                <el-alert title="温馨提示" type="success" show-icon :closable="false">
                  <span style="font-weight: bold; font-size: 12px;">
                    短信签名及退订设置字符均统计进行计费
                  </span>
                </el-alert>

                <div style="margin-top: 40px;">
                  <el-form-item prop="smsMax" label="字符长度">
                    <el-input v-model="dataForm.smsMax" placeholder="n个字符为一条计费，含签名及退订" clearable/>(字符/条)
                  </el-form-item>
                  <el-form-item prop="smsFee" label="单条费用">
                    <el-input v-model="dataForm.smsFee" placeholder="每条短信收费金额" clearable/>(元/条)
                  </el-form-item>
                </div>
              </div>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="公众号通知" name="second">
            <el-card shadow="never" class="panel">
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="发放通联券" name="third">
            <el-card shadow="never" class="panel">
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.TaskFee,
      active: 'first',
      dataForm: {
      },
      rules: {
      },
      list: []
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    async getLoad() {
      try {
        const res = await this.api.config()
        this.dataForm = res.data
      } catch (error) {
        console.error(error)
      }
    },
    // 提交编辑数据
    updateData() {
      const self = this
      this.$confirm('确认调整收费标准', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.dataForm.smsFee = Number(self.dataForm.smsFee)
            self.api.update(self.dataForm).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
